<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="app">
  <h1>{{msg}}</h1>
</div>

<script src="vue.js"></script>
<script>

  let app = new Vue({
    el: '#app',
    data: {
      msg: 'hello vue',
    },
    mounted() {
      console.log('mounted')
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    },
    beforeCreate() {
      console.log('beforeCrete')
    },
    created() {
      this.msg = 'created我被修改了'
      console.log('created')
    },
    beforeMount() {
      console.log('beforeMount')
    },
    methods: {}
  })

  /*
  * 生命周期 | 钩子函数
  * el: '#app'
  * let app = document.getElementById('app')
  * #### beforeCreate
  * h1 = document.createElement('h1')
  * #### created ajax
  * h1.textContent = this.msg
  * #### beforeMount
  * app.append(h1)
  * #### mounted
  *
  * #### beforeUpdate
  * this.msg = 'xxxx'
  * h1.textContent = this.msg
  * #### updated
  *
  * 虚拟dom
  * */

</script>
</body>
</html>